<template>
  <div class="outer">
    <div id="label">
      <table border="1" align="center">
        <thead>
          <th width="480px">考试项目</th>
          <th>考试时间</th>
          <th>报名时间</th>
          <th>考试费用</th>
          <th>有效报名</th>
        </thead>
      </table>
    </div>
    <div id="content">
      <table>
        <tbody>
          <tr>
            <td width="480px" align="center">成人高考</td>
            <td align="center">2020-10-21</td>
            <td align="center">2020-06-21 ~ 2020-9-21</td>
            <td align="center">140元</td>
            <td align="center">100人</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          time: "2020-10-21 9:00",
          organizer: "贵州省考试院",
          name: "成人高考",
          periods: "2020级",
          certificate: "入学资格",
          price: "120",
          start: "2021-03-21",
          stop: "2021-09-21",
          admission: "2021-10-10",
          state: "未报到时间",
          detailsA: 0,
          show: 1,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.outer{
  width: 70%;
  margin: 100px auto;
}
#content {
  // width: 50%;
  // overflow: scroll;
  float: left;
}
table {
  display: block;
}

thead {
  display: block;
  float: left;
  // width: 90px;
}

tbody {
  display: block;
  float: left;
}

th {
  display: block;
  border: 1px black solid;
}

td {
  display: block;
  border: 1px black solid;
}

tr {
  display: block;
  float: left;
}
</style>